<template>
  <div>
    城市：
    <table>
      <tr>
        <td v-for='i in citylist'>
          <button @click='changecity(i.id)' :class="i.id == cityid?'active':''">{{ i.name }}</button>
        </td>
      </tr>
    </table>

    商品信息
    <table>
      <tr>
        <td>标题</td>
        <td>价格</td>
        <td>
          <button @click="order">排序</button>
        </td>
      </tr>
      <tr v-for='i in sceniclist'>
        <td>{{ i.title }}</td>
        <td>{{i.price}}</td>
        <td>{{ i.id }}</td>
      </tr>
    </table>
    <van-pagination :total-items='total' :items-per-page='2' v-model='page' @change='change'/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      citylist: [],
      sceniclist: [],
      cityid: 0,
      page: 1,
      total: 0,
      sort: 'asc',
    }
  },
  methods: {
    //获取城市信息
    getcitylist() {
      this.axios.get('cityM').then(res => {
        this.citylist = res.data.list
      })
    },
    //获取景点信息
    getsceniclist() {
      this.axios.get('proM?cityid=' + this.cityid + '&page=' + this.page + '&sort=' + this.sort).then(res => {
        this.sceniclist = res.data.list
        this.total = res.data.total
      })
    },
    //点击城市，展示城市下的景点
    changecity(id) {
      this.cityid = id
      this.getsceniclist()
    },
    //change
    change(val) {
      this.page = val
      this.getsceniclist()
    },
    //排序
    order() {
      if (this.sort == 'asc') {
        this.sort = 'desc'
      } else {
        this.sort = 'asc'
      }
      this.getsceniclist()
    },

  },
  mounted() {
    this.getcitylist()
    this.getsceniclist()
  },
}
</script>
<style>
.active {
  background-color: aqua;
}
</style>
